<template>
  <div class="matrix-page">
    <el-table
      :data="matrixData"
      class="bottom-table"
      border
      max-height="calc(100% - 50px)"
      style="
        width: 100%;
        background: transparent;
        margin: 0 auto;
        border: 1px solid #1a3a6b;
        background: #0a2250;
        --el-table-border-color: none;
        --el-table-bg-color: none;
        --el-table-tr-bg-color: none;
      "
      :row-class-name="tableRowClassName"
      :header-cell-style="headerStyle"
      :cell-style="cellStyle"
    >
      <el-table-column prop="name" label="姓名" fixed min-width="120" />
      <el-table-column
        v-for="col in columns"
        :key="col.prop"
        :prop="col.prop"
        :label="col.label"
        align="center"
        min-width="90"
      >
        <template #default="{ row }">
          <div>
            <div class="circle-container">
              <svg width="28" height="28" viewBox="0 0 200 200">
                <!-- 四个象限 -->
                <path
                  d="M100,100 L100,0 A100,100 0 0,1 200,100 Z"
                  :fill="
                    row[col.prop] >= 1
                      ? 'rgba(24, 220, 255,1.0)'
                      : 'rgba(24, 220, 255,0.1)'
                  "
                />
                <path
                  d="M100,100 L200,100 A100,100 0 0,1 100,200 Z"
                  :fill="
                    row[col.prop] >= 2
                      ? 'rgba(24, 220, 255,1.0)'
                      : 'rgba(24, 220, 255,0.1)'
                  "
                />
                <path
                  d="M100,100 L100,200 A100,100 0 0,1 0,100 Z"
                  :fill="
                    row[col.prop] >= 3
                      ? 'rgba(24, 220, 255,1.0)'
                      : 'rgba(24, 220, 255,0.1)'
                  "
                />
                <path
                  d="M100,100 L0,100 A100,100 0 0,1 100,0 Z"
                  :fill="
                    row[col.prop] >= 4
                      ? 'rgba(24, 220, 255,1.0)'
                      : 'rgba(24, 220, 255,0.1)'
                  "
                />
                <!-- 分割线 -->
                <line
                  x1="100"
                  y1="0"
                  x2="100"
                  y2="200"
                  stroke="black"
                  stroke-width="2"
                />
                <line
                  x1="0"
                  y1="100"
                  x2="200"
                  y2="100"
                  stroke="black"
                  stroke-width="2"
                />
              </svg>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
// 列定义（工序/能力）
const columns = [
  { prop: "OP005", label: "OP005" },
  { prop: "OP010", label: "OP010" },
  { prop: "OP020", label: "OP020" },
  { prop: "OP030", label: "OP030" },
  { prop: "OP040", label: "OP040" },
  { prop: "OP050", label: "OP050" },
  { prop: "OP060", label: "OP060" },
  { prop: "OP070", label: "OP070" },
  { prop: "OP080", label: "OP080" },
  { prop: "OP100", label: "OP100" },
];

// 行数据（人员及其能力，1表示有能力，0或空表示无）
const matrixData = [
  {
    name: "张三",
    OP005: 1,
    OP010: 1,
    OP020: 0,
    OP030: 3,
    OP040: 0,
    OP050: 1,
    OP060: 2,
    OP070: 1,
    OP080: 0,
    OP100: 4,
  },
  {
    name: "李四",
    OP005: 0,
    OP010: 1,
    OP020: 1,
    OP030: 0,
    OP040: 1,
    OP050: 0,
    OP060: 1,
    OP070: 0,
    OP080: 1,
    OP100: 0,
  },
  {
    name: "王五",
    OP005: 1,
    OP010: 0,
    OP020: 1,
    OP030: 1,
    OP040: 1,
    OP050: 0,
    OP060: 0,
    OP070: 0,
    OP080: 0,
    OP100: 1,
  },
  {
    name: "赵六",
    OP005: 0,
    OP010: 0,
    OP020: 0,
    OP030: 1,
    OP040: 1,
    OP050: 1,
    OP060: 0,
    OP070: 0,
    OP080: 0,
    OP100: 0,
  },
  {
    name: "孙七",
    OP005: 0,
    OP010: 0,
    OP020: 0,
    OP030: 0,
    OP040: 0,
    OP050: 0,
    OP060: 1,
    OP070: 1,
    OP080: 0,
    OP100: 1,
  },
  {
    name: "李主管",
    OP005: 1,
    OP010: 0,
    OP020: 0,
    OP030: 0,
    OP040: 0,
    OP050: 0,
    OP060: 0,
    OP070: 0,
    OP080: 1,
    OP100: 0,
  },
  {
    name: "王主管",
    OP005: 0,
    OP010: 0,
    OP020: 0,
    OP030: 0,
    OP040: 0,
    OP050: 0,
    OP060: 0,
    OP070: 0,
    OP080: 0,
    OP100: 1,
  },
];

// 表头样式
const headerStyle = () => ({
  background: "#0a2250 !important",
  fontFamily: "DINPro",
  height: "50px",
});

// 单元格样式
const cellStyle = () => ({
  background: "#0a2250",
  color: "#fff",
  borderColor: "#1a3a6b",
  paddingTop: "4px",
  paddingBottom: "4px",
  fontFamily: "DINPro",
});

// 行样式解析
function tableRowClassName(rowIndex: any) {
  if (rowIndex.rowIndex % 2 != 0) {
    return "evenRow";
  }
  return "oddRow";
}
</script>

<style scoped lang="scss">
.matrix-page {
  // background: #0a2250;
  height: 100%;
}
.el-table {
  background: transparent;
}

.circle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 38px;
}

// :deep(.top-table .el-table__body-wrapper) {
//   display: none;
// }
// 整体表格样式
:deep(.el-table) {
  // .el-table__border-left-patch {
  //   width: 0;
  // }

  thead {
    // height: 78px;
    // background: rgba(15, 36, 62, 0.6);
    background: rgba(2, 79, 173, 0.3);
    .cell {
      font-size: 18px;
      line-height: 25px;
      writing-mode: horizontal-tb;
      word-spacing: 0px;
      writing-mode: horizontal-tb;
      text-orientation: upright;
      color: transparent;
      background: linear-gradient(
          0deg,
          rgb(88, 175, 255) 0px,
          rgb(255, 255, 255) 100%
        )
        text;
      clip-path: inset(1px);
    }

    tr:nth-last-child(1) {
      border-right: none;
    }
  }
  tbody {
    tr {
      height: 30px;
      .cell {
        font-size: 16px;
        line-height: 30px;
      }
    }
    tr:hover {
      background-color: rgb(55, 90, 136) !important;
    }
    td.el-table__cell {
      background-color: transparent !important;
      border: none !important;
    }
  }

  .el-table__empty-text {
    color: rgb(199, 228, 240);
    font-size: 26px;
    line-height: 200px;
  }
}
// 单行样式
:deep(.evenRow) {
  background: rgba(15, 36, 62, 0.3);
  td {
    .cell {
      color: rgb(104, 201, 240);
    }
  }
}

// 双行样式
:deep(.oddRow) {
  background: rgba(10, 24, 42, 0.5);
  td {
    .cell {
      color: rgb(168, 190, 216);
    }
  }
}
</style>
